import { TextInput, View, StyleSheet, TouchableOpacity, Dimensions, Image } from "react-native";
import AntDesign from "react-native-vector-icons/AntDesign";
import Colors from '../../util/Colors';
import React, { useState } from "react";
import { Button, Text } from "@rneui/base";
import { Card } from "@rneui/themed";
export default function(props){


  const [imgSize, setImgSize] = useState(50);

  const initSize = (event) => {
    setImgSize( Math.floor(event.nativeEvent.layout.width*0.8));
  }

  return(
    <TouchableOpacity onPress={props.onPress}>
      <Card containerStyle={styles.card} wrapperStyle={styles.card}	>
        <View style={styles.container}
              flexDirection='row'
        >
          <View style={{ flex: 1,justifyContent:'center',alignItems:'center'}} onLayout={initSize}>
            {/*<Text style={styles.homeSideTitle}>{name}</Text>*/}
            {/*<Image source={{uri:img}}></Image>*/}
            <View style={[{
              width:imgSize,
              height:imgSize
            },
              styles.img
            ]} roundAsCircle={true}>
            <Image style={{
              width:imgSize,
              height:imgSize
            }} source={{uri:props.img}}/>
            </View>
          </View>
          <View style={{ flex: 1,justifyContent:'center',alignItems:'center'}}>
            {
              props.top3.map((r) => {
                return(
                  <Text style={styles.homeSideTitle} key={r.id}>{r.name}<Text style={styles.subTitle} key={r.id+'t'}>{' - '+r.singer}</Text></Text>
                )

              })
            }


          </View>

        </View>
      </Card>
    </TouchableOpacity>
  )
}
const screen = Dimensions.get('window');
const width = screen.width;
const height = screen.height;
const styles = StyleSheet.create({
  container:{

    height:130
  },
  homeSideTitle: {
    fontFamily:'',
    fontSize: 15,
    color: 'rgba(255,255,255,0.86)',
    paddingTop: 5,
    paddingBottom: 5,

  },
  subTitle:{
    color: 'rgba(255,255,255,0.32)',
  },
  img:{
    backgroundColor: '#eeeeee',
    overflow: 'hidden', // 切掉多余部分
    borderColor: 'white',
    borderWidth: 0, // 边框宽度为0 + hidden，相当于切成圆角。
    borderRadius: 4, // 圆角
    shadowColor: 'grey', // 添加阴影效果
    shadowOffset: {width: 1, height: 1},
    shadowOpacity: 0.5,
    shadowRadius: 4,
    elevation: 4, // android端要加上这个属性，不然阴影不出来
  },
  card:{
    backgroundColor:'rgba(255,255,255,0)',
    borderColor:'rgba(255,255,255,0)'
  }
});
